<template>
  <div
    :style="{ paddingTop: `${searchBarTop}px` }"
    class="healthreport relative px-34rpx pb-152rpx">
    <!-- 背景图 -->
    <image
      :src="`${cdnUrl}/imgs/healthDetail/reportbg.png${imgVersion}`"
      mode="scaleToFill"
      class="pointer-events-none absolute bottom-0 left-0 right-0 top-0 z--9 h-100% w-100%"
    />
    <div class="mb-16rpx flex items-center justify-between">
      <div class="flex items-center">
        <image
          :src="userStores.user.avatar_url"
          mode="scaleToFill"
          class="mr-34rpx h-68rpx w-68rpx rounded-50%"
        />
        <div v-if="sevenQuestionReport" class="text-32rpx font-bold text-hex-000000">Hi，{{ sevenQuestionReport.user_name }}</div>
      </div>
      <div>
        <!-- <image
          :src="`${cdnUrl}/svgicons/reportShare.svg${imgVersion}`"
          mode="scaleToFill"
          class="h-56rpx w-56rpx"
        /> -->
      </div>
    </div>
    <div
      class="font-alimamaShuHeiTi mb-16rpx text-40rpx font-600 text-hex-333333"
    >
      你的健康测评报告请查收~
    </div>
    <!-- 综合检测 -->
    <div class="bgblur60 mb-62rpx box-border w-100% border-4rpx border-hex-FFFFFF rounded-32rpx border-solid from-[rgba(255,255,255,0.7)] to-[rgba(249,249,251,0.5)] bg-gradient-to-b p-32rpx">
      <div class="bgblur120 absolute left-0 top-0 h-168rpx w-134rpx bg-hex-FFDB96" />
      <div
        v-if="!isComprehensiveTest"
        class="mb-48rpx box-border w-100% flex items-center justify-between rounded-32rpx bg-hex-ffffff px-20rpx py-8rpx"
        @click.stop="goTest">
        <div class="flex items-center font-600 text-hex-333333">
          <image
            :src="`${cdnUrl}/imgs/healthDetail/icon1.png${imgVersion}`"
            mode="scaleToFill"
            class="mr-20rpx h-68rpx w-68rpx"
          />
          健康综合测评
        </div>
        <div class="btn-theme-bg h-56rpx w-128rpx rounded-50rpx text-center text-28rpx leading-56rpx">进入</div>
      </div>
      <div v-if="isComprehensiveTest">
        <div class="z-99 flex justify-between">
          <div class="font-alimamaShuHeiTi text-24rpx font-600 text-hex-000000">
            健康测评综合得分:
            <text class="font-numberFont text-60rpx font-600 text-hex-FF8863">{{ userGrade }}</text>
            <text class="text-24rpx text-hex-7C8699">/100</text>
          </div>
          <div>
            <div class="mb-4rpx text-24rpx text-hex-7C8699">你的得分</div>
            <div class="mb-22rpx h-6rpx w-40rpx rounded-3rpx bg-hex-29B897" />
            <div class="mb-4rpx text-24rpx text-hex-7C8699">平均得分</div>
            <div class="mb-22rpx h-6rpx w-40rpx flex justify-between">
              <div class="h-6rpx w-8rpx rounded-l-3rpx bg-hex-CAE6F6" />
              <div class="h-6rpx w-16rpx bg-hex-CAE6F6" />
              <div class="h-6rpx w-8rpx rounded-r-3rpx bg-hex-CAE6F6" />
            </div>
          </div>
        </div>
        <!-- 雷达图 -->
        <score-radar :comprehensiveData="comprehensiveList" />
        <div
          class="font-alimamaShuHeiTi mb-32rpx text-center text-24rpx font-600 text-hex-333333"
        >
          您的综合健康水平已经超过了
          <text>{{ overPercent.toFixed(1) }}</text>
          %的用户
        </div>
      </div>
      <div class="relative box-border rounded-40rpx bg-hex-ffffff p-32rpx">
        <text
          class="boxshadow mb-20rpx box-border inline-block h-60rpx rounded-80rpx rounded-bl-25rpx rounded-tl-110rpx px-24rpx text-28rpx leading-60rpx text-hex-ffffff"
          style="background: linear-gradient(90deg, #4F93F9 0%, #B6CDEF 100%);">
          结论详解
        </text>
        <div v-if="sevenQuestionReport" class="mb-48rpx text-28rpx text-hex-7C8699">
          {{ sevenQuestionReport.conclusion_detail }}
        </div>
        <text
          class="boxshadow mb-24rpx box-border inline-block h-60rpx rounded-80rpx rounded-bl-25rpx rounded-tl-110rpx px-24rpx text-28rpx leading-60rpx text-hex-ffffff"
          style="background: linear-gradient(90deg, #4F93F9 0%, #B6CDEF 100%);">
          健康目标建议
        </text>
        <div class="mb-28rpx text-28rpx text-hex-333333">"建议您用以下药食同源的中药材调补身体"</div>
        <div class="mb-16rpx h-34rpx flex justify-center">
          <text v-if="sevenQuestionReport" class="relative z-99 inline-block text-center text-26rpx font-800 text-hex-333333">
            {{ sevenQuestionReport.supplement.split('、')[0] }}、
            {{ sevenQuestionReport.supplement.split('、')[1] }}、
            {{ sevenQuestionReport.supplement.split('、')[2] }}
            <text class="absolute bottom-0 left-0 right-0 inline-block h-12rpx bg-hex-FF8863 -z-9" />
          </text>
        </div>
      </div>
    </div>
    <!-- 成分功效 -->
    <div class="bgblur60 relative mb-62rpx box-border border-4rpx border-hex-FFFFFF rounded-40rpx border-solid from-hex-F9F9FB to-[rgba(255,255,255,0.6)] bg-gradient-to-b px-32rpx pb-32rpx pt-70rpx">
      <div class="boxshadowbtn absolute left-128rpx top--30rpx h-74rpx w-430rpx rounded-80rpx bg-hex-abcd03 text-center text-28rpx font-600 leading-74rpx text-hex-ffffff">成分功效</div>
      <div>
        <image
          :src="`${cdnUrl}/imgs/healthDetail/msg.png${imgVersion}`"
          mode="scaleToFill"
          class="h-80rpx w-620rpx"
        />
      </div>
      <div v-for="(item, index) in supplementList" :key="index">
        <div class="mb-32rpx ml-12rpx flex items-center text-32rpx font-600 text-hex-333333">
          <text class="mr-24rpx inline-block h-32rpx w-8rpx rounded-b-4rpx rounded-t-4rpx bg-hex-abcd03" />{{ item.split('：')[0] }}
        </div>
        <div class="mb-48rpx box-border border-2rpx border-hex-ABCD03 rounded-24rpx border-dotted p-32rpx">
          <div class="text-28rpx tracking-wider text-hex-7C8699">
            {{ item }}
          </div>
        </div>
      </div>
      <div class="relative box-border rounded-60rpx bg-hex-ffffff p-32rpx">
        <text
          class="boxshadow mb-20rpx box-border inline-block h-60rpx rounded-80rpx rounded-bl-30rpx rounded-tl-90rpx px-24rpx text-28rpx leading-60rpx text-hex-ffffff"
          style="background: linear-gradient(90deg, #4F93F9 0%, #B6CDEF 100%);">
          健康问题
        </text>
        <div v-if="sevenQuestionReport" class="text-28rpx tracking-wider text-hex-7C8699"> {{ sevenQuestionReport.health_problem }}</div>
      </div>
    </div>
    <!-- 更多建议 -->
    <div
      class="bgblur60 relative mb-62rpx box-border border-4rpx border-hex-FFFFFF rounded-40rpx border-solid from-hex-F9F9FB to-[rgba(255,255,255,0.6)] bg-gradient-to-b px-32rpx pb-32rpx pt-70rpx">
      <div
        class="boxshadowbtn absolute left-128rpx top--30rpx h-74rpx w-430rpx rounded-80rpx bg-hex-abcd03 text-center text-28rpx font-600 leading-74rpx text-hex-ffffff">
        更多建议
      </div>
      <div>
        <image
          :src="`${cdnUrl}/imgs/healthDetail/servicemsg.png${imgVersion}`"
          mode="scaleToFill"
          class="h-80rpx w-620rpx"
        />
      </div>
      <div>
        <div class="mb-32rpx ml-12rpx flex items-center text-32rpx font-600 text-hex-333333">
          <text class="mr-24rpx inline-block h-32rpx w-8rpx rounded-b-4rpx rounded-t-4rpx bg-hex-abcd03" />营养建议
        </div>
        <div class="mb-48rpx box-border border-2rpx border-hex-ABCD03 rounded-24rpx border-dotted p-32rpx">
          <div v-if="sevenQuestionReport" class="text-28rpx tracking-wider text-hex-7C8699">
            {{ sevenQuestionReport.nutrition_advice }}
          </div>
        </div>
      </div>
      <div>
        <div class="mb-32rpx ml-12rpx flex items-center text-32rpx font-600 text-hex-333333">
          <text class="mr-24rpx inline-block h-32rpx w-8rpx rounded-b-4rpx rounded-t-4rpx bg-hex-abcd03" />饮食建议
        </div>
        <div class="mb-48rpx box-border border-2rpx border-hex-ABCD03 rounded-24rpx border-dotted p-32rpx">
          <div v-if="sevenQuestionReport" class="flex">
            <text
              class="mr-14rpx mt-12rpx inline-block h-10rpx w-10rpx rounded-50% from-hex-B8D5FF to-hex-63A1FF bg-gradient-to-r" />
            <div
              class="mb-24rpx w-100% text-28rpx tracking-wider text-hex-7C8699">
              {{ sevenQuestionReport.diet_advice }}
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="mb-32rpx ml-12rpx flex items-center text-32rpx font-600 text-hex-333333">
          <text class="mr-24rpx inline-block h-32rpx w-8rpx rounded-b-4rpx rounded-t-4rpx bg-hex-abcd03" />日常生活建议
        </div>
        <div class="box-border border-2rpx border-hex-ABCD03 rounded-24rpx border-dotted p-32rpx">
          <div v-if="sevenQuestionReport" class="text-28rpx tracking-wider text-hex-7C8699">
            {{ sevenQuestionReport.life_advice }}
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐阅读 -->
    <div class="mb-18rpx mt-32rpx text-28rpx font-800 text-hex-333333">推荐阅读</div>
    <div
      v-for="(item, index) in recommendList"
      :key="index"
      class="mb-32rpx box-border w-100% flex border-4rpx border-hex-ffffff rounded-40rpx border-solid bg-[rgba(249,249,251,0.8)] p-24rpx">
      <div class="w-1/3">
        <image
          :src="item.coverImage"
          mode="scaleToFill"
          class="mr-24rpx h-192rpx w-184rpx rounded-16rpx"
        />
      </div>
      <div class="w-2/3 flex flex-col justify-between">
        <div>
          <div class="mb-16rpx w-100% truncate text-28rpx font-800 text-hex-333333">{{ item.title }}</div>
          <div class="multiLine-hiddle text-24rpx text-hex-7C8699">{{ item.content }}</div>
        </div>
        <div class="flex items-center justify-between text-24rpx text-hex-7C8699">
          <div class="flex items-center">
            <image
              :src="item.avatarUrl"
              mode="scaleToFill"
              class="mr-12rpx h-44rpx w-44rpx rounded-50%"
            />
            {{ item.nickname }}
          </div>
          <div class="text-hex-7C8699">{{ item.createAt.split(' ')[0] }}</div>
        </div>
      </div>
    </div>
    <div class="healthProductRecom relative box-border"
    >
      <div class="mb-32rpx box-border">
        <div class="relative mb-26rpx h-34rpx">
          <div class="absolute left-0 z-99 text-28rpx font-800 text-hex-333333 -bottom-4rpx">基础方案</div>
          <div class="absolute bottom-0 left-0 h-8rpx w-122rpx bg-hex-FF8863" />
        </div>
        <div v-if="productList" class="box-border flex flex-wrap justify-between rounded-40rpx bg-hex-ffffff p-32rpx">
          <div
            v-for="(item, index) in productList"
            :key="index"
            class="mb-32rpx w-48%"
          >
            <image
              :src="item.url"
              mode="scaleToFill"
              class="h-262rpx w-296rpx overflow-hidden rounded-16rpx bg-hex-F9DEE3"
            />
            <div class="w-288rpx truncate text-28rpx text-hex-333333">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="relative mb-32rpx box-border h-300rpx">
        <image
          :src="`${cdnUrl}/svgicons/prodocutperson.svg${imgVersion}`"
          mode="scaleToFill"
          class="absolute right-0 h-267rpx w-158rpx -top-50rpx"
        />
        <div class="relative z-99 mb-26rpx h-34rpx">
          <div class="absolute left-0 z-99 text-28rpx font-800 text-hex-333333 -bottom-4rpx">推荐理由</div>
          <div class="absolute bottom-0 left-0 h-8rpx w-122rpx bg-hex-FF8863" />
        </div>
        <div v-if="productRecommendationsReason" class="absolute left-0rpx right-0rpx box-border flex flex-wrap justify-between border-4rpx border-hex-ffffff rounded-40rpx border-solid bg-hex-F9F9FB p-32rpx text-28rpx text-hex-7C8699">
          {{ productRecommendationsReason }}
        </div>
      </div>
      <div class="mb-172rpx box-border">
        <div class="relative mb-26rpx h-34rpx">
          <div class="absolute left-0 z-99 text-28rpx font-800 text-hex-333333 -bottom-4rpx">如何使用</div>
          <div class="absolute bottom-0 left-0 h-8rpx w-122rpx bg-hex-FF8863" />
        </div>
        <div v-if="instruction" class="box-border flex flex-wrap justify-between border-4rpx border-hex-ffffff rounded-40rpx border-solid bg-hex-F9F9FB p-32rpx text-28rpx text-hex-7C8699">
          {{ instruction }}
        </div>
      </div>
    </div>
    <!-- 邀请好友 -->
    <div class="fixed bottom-0 left-0 right-0 z-999">
      <div
        class="bgblur h-152rpx flex items-center justify-between border-4rpx border-transparent border-t-hex-ffffff rounded-t-32rpx border-solid bg-[rgba(249,249,251,0.8)] px-24rpx"
      >
        <div class="ml-30rpx text-center text-20rpx text-hex-29B897"
             @click="goBack">
          <image
            class="block h-48rpx w-48rpx"
            :src="`${cdnUrl}/imgs/healthDetail/fanhui.png${imgVersion}`"
            mode="scaleToFill"
          />
          <div class="text-center text-20rpx text-hex-67686F">返回</div>
        </div>
        <div
          class="btn-normal-bg ml-30rpx box-border h-80rpx rounded-40rpx px-80rpx text-center text-28rpx leading-80rpx"
          @click="navTo('/pages-health/healthDetail')">
          再次测评
        </div>
        <button
          open-type="share" data-name="inviteFriends"
          class="btn-theme-bg box-border h-80rpx rounded-40rpx px-80rpx text-center text-28rpx leading-80rpx">
          邀请好友</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

onShareAppMessage((res) => {
  if (res.from === 'button' && res.target.dataset.name === 'inviteFriends') {
    return {
      title: '欢迎来到心悦健康频道',
      path: '/pages/health',
    }
  }
  return { title: '心悦' }
})
onShareTimeline(() => {
  return {
    title: '分享朋友圈',
  }
})
const goback = () => {
  uni.reLaunch({
    url: '/pages-health/healthEvaluationRecords',
  })
}
const userStores = useUserStore()
let reportId: any = $ref('')
let searchBarTop: any = $ref('24')
let questionCategoryId: any = $ref('')
let upPageTitle: any = $ref('')

const goTest = () => {
  // console.log(11111)
  navTo(`/pages-health/healthQuestionDetail?questionType=9&evaluationId=${reportId}&spliceIndex=0`)
  // uni.redirectTo({
  //   url: `/pages-health/healthQuestionDetail?questionType=9&evaluationId=${reportId}&spliceIndex=0`,
  // })
}

onLoad((options) => {
  // const page = getCurrentPages()
  // upPageTitle = page[page.length - 2].route
  // console.log(upPageTitle)
  // console.log(page)
  if (options) {
    reportId = options.evaluationId
    questionCategoryId = options.type
  }
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
  const page = getCurrentPages()
  // console.log(page, 'page')

  upPageTitle = page[page.length - 2].route
  // console.log(upPageTitle, 'upPageTitle')
})

const goBack = () => {
  // console.log((upPageTitle === 'pages-health/healthEvaluationRecords'))

  if (upPageTitle === 'pages-health/healthEvaluationRecords' || upPageTitle === 'pages-health/healthReport') {
    uni.reLaunch({
      url: '/pages-health/healthEvaluationRecords',
    })
  } else {
    uni.reLaunch({
      url: '/pages-health/healthProgramme',
    })
  }
}

// 查看体质弹窗
const delpop: any = $ref('')

let isComprehensiveTest: any = $ref(false)//控制综合检测的入口


let recommendList: any = $ref([])

// 获取推荐阅读列表
const getRecommendList = async () => {
  const { status, data } = await Fetch('/qqyapi/auth/article/recommendPageList')
  if (status === 200) {
    if (data.code === 0) {
      recommendList = data?.result
      recommendList.forEach((item) => {
        if (item.articleType === 1) {
          let jsonContent = JSON.parse(item.content)
          item.content = jsonContent[0].content
        }
      })
    }
  }
}

let sevenQuestionReport: any = $ref()
let supplementList: any = $ref()

// 生成报告
const handelReport = async () => {
  const reqData = {
    method: 'post',
    data: {
      'evaluationId': reportId,
      'questionCategoryId': questionCategoryId,
    },
  }
  const { data, status } = await Fetch('/qqyapi/health/reports', reqData)
  if (status === 200) {
    getSevenQuestionReport()
  }
}

let generalStatus: any = $ref('')//七大类报告状态
let productList: any = $ref('')
let productRecommendationsReason: any = $ref('')
let instruction: any = $ref('')
// 获取七大类问题报告
const getSevenQuestionReport = async () => {
  const reqData = {
    method: 'post',
    data: { evaluation_id: reportId },
  }
  const { data, status } = await Fetch('/api/s/health/reports/get', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }

  sevenQuestionReport = data.result?.dataList[0]
  supplementList = sevenQuestionReport?.supplement_effect?.split('\n').splice(0, 3)
  productList = sevenQuestionReport?.product_recommendation
  productRecommendationsReason = sevenQuestionReport?.product_recommendation_reason
  instruction = sevenQuestionReport?.instruction
}


//获取健康综合平均得分记录
const getAveryAgesList = async () => {
  const { data, status, error } = await Fetch('/qqyapi/health/generalScores/groupAverages')
  if (status === 200) {
    comprehensiveList = comprehensiveList.concat(data?.result)
    isComprehensiveTest = true

  }
}
//得到健康综合百分比
let overPercent = $ref(0)
const getPercent = async (grades) => {
  const { data, status, error } = await Fetch('/qqyapi/health/generalScores/overPercent', {
    method: 'get',
    data: { generalTotalScore: grades },
  })
  if (status !== 200 || data.code !== 0) return
  overPercent = Number(data.result) * 100
}
//获取健康综合得分记录
let userGrade = $ref(0)
let comprehensiveList: any = $ref([])
const getComprehensiveList = async () => {
  const reqData = {
    method: 'get',
    data: {
      evaluationId: reportId,
    },
  }
  const { data, status, error } = await Fetch('/qqyapi/health/generalScores', reqData)
  if (status === 200 && data?.result) {
    comprehensiveList = data.result
    if (comprehensiveList.length > 0) {
      comprehensiveList.forEach(item => {
        userGrade += Number(item.value)
      })
      getPercent(userGrade)
      getAveryAgesList()
    }
  }
}
// 获取测评报告的状态
const getReportStatus = async () => {
  if (isNilOrEmpty(reportId)) {
    return
  }
  const reqData = {
    method: 'post',
    data: { id: reportId },
  }
  const { data, status } = await Fetch('/api/s/health/evaluations', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  generalStatus = data.result.dataList[0].status
  if (generalStatus === 0) {
    handelReport()
  }
  if (generalStatus === 1) {
    getSevenQuestionReport()
  }
}

onMounted(() => {
  getReportStatus()
  getComprehensiveList()
  getRecommendList()
})
</script>

<style lang="scss">
.healthreport{
  .multiLine-hiddle{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .font-alimamaShuHeiTi{
    font-family:alimamaShuHeiTi;
  }

  .font-numberFont{
    font-family:'DingTalk JinBuTi';
  }

  .bgblur60{
    backdrop-filter: blur(45rpx);
  }

  .bgblur{
    backdrop-filter: blur(40rpx);
  }

  .bgblur120{
    filter: blur(120rpx);
  }

  .boxshadow{
    box-shadow: inset 0rpx 4rpx 8rpx 0rpx #B5D2FF;
  }

  .boxshadowbtn{
    box-shadow: 0 4px 4px rgb(51 190 158 / 21%);
  }

  ::v-deep(.uni-swiper-wrapper){
    .uni-swiper-dot{
      width: 30rpx;
      height: 10rpx;
      background: #D9D9D9;
      border-radius: 46rpx;
    }

    .uni-swiper-dots-horizontal {
      left: 50%;
      bottom: 22px;
      text-align: center;
      white-space: nowrap;
      transform: translate(-50%, 0);
    }

    .uni-swiper-dot-active{
      width: 10rpx;
      height: 10rpx;
      background: #ABCD03;
      border-radius: 50%;
    }
  }

  .healthProductRecom{
    // background: linear-gradient(to bottom, rgb(249 251 240), rgb(223 246 249), rgb(216 234 252),rgb(229 236 253));

    .font-alimamaShuHeiTi{
      font-family:alimamaShuHeiTi;
    }
  }
}
</style>
